{extend name="common@create" /}
{block name="mycss"}
{css href="/static/H-ui.admin_v3.1.3.1/H-ui.admin/lib/webuploader/0.1.5/webuploader.css" /}
{/block}
{block name="formaa"}
	<div class="form form-horizontal">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">注意：</label>
			<div class="formControls col-xs-8 col-sm-9">
				友情提示：批传前请先确定上传名单与服务器是否重复，如果重复请删除重复数据。不同学校数据不可以放在同一个文件内。确定学校无误后再提交表单。
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">模板：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<a href="{:url('download')}"class="btn btn-primary radius">教师信息表模板</a>
				<a href="{:url('downloadVba')}"class="btn btn-primary radius">转换姓名VBA</a>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>上传文件：</label>
			<div class="formControls col-xs-8 col-sm-9 f-l">
				<div class="uploader-thum-container">
					<div id="fileList" class="uploader-list"></div>
					<div id="filePicker">选择文件</div>
					<button id="btn-star" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
				</div>
			</div>
		</div>
	</div>
	<form action="/teacher/createall" method="POST" class="form form-horizontal" id="form-member-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文件路径：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" readonly="false" value="" placeholder="上传文件后自动生成路径" id="url" name="url">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>学校：</label>
			<div class="formControls col-xs-8 col-sm-9 f-l">
				<span class="select-box f-l" style="width:300px;">
				{php} $school = schlist('校级','校级');{/php}
				<select class="select" id="school" name="school" size="1" required>
					<option value="">--请选择现工作单位--</option>
					{volist name="school" id="vo" key="k"}
						<option value="{$vo.id}">{$vo.title}</option>
					{/volist}
				</select>
				</span>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
{/block}
{block name="yanzheng"}
{js href="/static/H-ui.admin_v3.1.3.1/H-ui.admin/lib/webuploader/0.1.5/webuploader.js"}
<script type="text/javascript">
	// 上传文件
	$(function(){
	    $('.skin-minimal input').iCheck({
	        checkboxClass: 'icheckbox-blue',
	        radioClass: 'iradio-blue',
	        increaseArea: '20%'
	    });
	    
	    $list = $("#fileList"),
	    $btn = $("#btn-star"),
	    state = "pending",
	    uploader;

	    var uploader = WebUploader.create({
	        auto: false,
	        swf: '/static/H-ui.admin_v3.1.3.1/H-ui.admin/lib/webuploader/0.1.5/Uploader.swf',
	    
	        // 文件接收服务端。
	        server: '{:url("upload")}',
	     
	        // 选择文件的按钮。可选。
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        pick: '#filePicker',
	    
	        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	        resize: false,
	        //上传时提交自身需要的字段并传递到后台。
	        formData: {  
	        }, 
	        // 只允许选择图片文件。
	        accept: {
	            title: 'Excel',
	            extensions: 'xls,xlsx',
	            // mimeTypes: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel'
	            mimeTypes: '.xls,.xlsx'
	        },

	        fileNumLimit: 1, // 上传文件数
	        fileSizeLimit:2*1024*1024,
	    });
	    uploader.on( 'fileQueued', function( file ) {
	        var $li = $(
	            '<div id="' + file.id + '" class="item">' +
	                '<div class="pic-box"><img></div>'+
	                '<div class="info">' + file.name + '</div>' +
	                '<p class="state">等待上传...</p>'+
	            '</div>'
	        ),
	        $img = $li.find('img');
	        $list.append( $li );
	    
	        // 创建缩略图
	        // 如果为非图片文件，可以不用调用此方法。
	        // thumbnailWidth x thumbnailHeight 为 100 x 100
	        uploader.makeThumb( file, function( error, src ) {
	            if ( error ) {
	                $img.replaceWith('<span>不能预览</span>');
	                return;
	            }
	    
	            $img.attr( 'src', src );
	        }, thumbnailWidth, thumbnailHeight );
	    });
	    // 文件上传过程中创建进度条实时显示。
	    uploader.on( 'uploadProgress', function( file, percentage ) {
	        var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress-box .sr-only');
	    
	        // 避免重复创建
	        if ( !$percent.length ) {
	            $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
	        }
	        $li.find(".state").text("上传中");
	        $percent.css( 'width', percentage * 100 + '%' );
	    });
	    
	    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
	    uploader.on( 'uploadSuccess', function( file ) {
	        $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
	    });
	    
	    uploader.on( 'uploadAccept', function( file, response ) {
	        $('#url').val(response.url);
	    });

	    // 文件上传失败，显示上传出错。
	    uploader.on( 'uploadError', function( file ) {
	        $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
	    });
	    
	    // 完成上传完了，成功或者失败，先删除进度条。
	    uploader.on( 'uploadComplete', function( file ) {
	        $( '#'+file.id ).find('.progress-box').fadeOut();
	    });
	    uploader.on('all', function (type) {
	        if (type === 'startUpload') {
	            state = 'uploading';
	        } else if (type === 'stopUpload') {
	            state = 'paused';
	        } else if (type === 'uploadFinished') {
	            state = 'done';
	        }

	        if (state === 'uploading') {
	            $btn.text('暂停上传');
	        } else {
	            $btn.text('开始上传');
	        }
	    });

	    $btn.on('click', function () {
	        if (state === 'uploading') {
	            uploader.stop();
	        } else {
	            uploader.upload();
	        }
	    });

	});


	// 设置表单验证规则
		var myrules = {
				url:{
					required:true,
				},
			};

		// 设置表单提交方式
		var mytype = 'POST';


</script>
{/block}